@import '../../default/css/style.scss';

@mixin definitions($main, $main-background) {
    .widget_content #tracker_report_table > thead > tr > th {
        border-bottom-color: #B2B2B2;
    }

    .tracker-report-query {
        border-top: 2px solid $main;
        border-bottom: 1px solid darken($main-background, 5%);
        background: $main-background;
    }

    .tracker_artifact_fieldset legend {
        color: $main;

        &.toggler-noajax {
            border-bottom: 2px solid $main;
        }
    }

    .format-warning {
        color: $main;
    }

    #tracker_artifact_followup_comments {
        position: absolute;
        width: 100%;
        box-sizing: initial;
        -moz-box-sizing: initial;
    }

    .table.tracker_report_table {
        thead:first-child > tr:first-child > th,
        > thead > tr > th,
        > tbody > tr > td {
            border-top-color: darken($main-background, 5%);
            border-right-color: darken($main-background, 5%);
            border-left-color: darken($main-background, 5%);
        }

        > tbody > tr:last-child > td {
            border-color: darken($main-background, 5%) !important;
        }

        > thead > tr > th.drop-over {
            background: $main-background;
        }

        > thead > tr > th > table > tbody > tr > td > a {
            color: $main;
        }

        > tbody > tr.tracker_report_table_aggregates > td {
            > table {
                > thead > tr > th,
                > thead:first-child > tr:first-child > th {
                    background: $main-background;
                    border-left-color: darken($main-background, 5%);
                }

                > tbody > tr > td {
                    border-color: darken($main-background, 5%);
                }
            }
        }
    }

    .tracker_artifact_followup-with_comment {
        border-left: 3px solid $main;
    }

    .card-details .avatar {
        width: 25px;
        height: 25px;
        display: inline-block;
        border: none;
        position: relative;
        top: -2px;
        left: 1px;
    }

    .card-details .avatar > img {
        width: 25px;
        height: 25px;
    }

    .modal-header-with-side-panels {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .modal-header-side-panel {
        justify-content: center;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
}

body {
    @import 'variables-orange';
    @include definitions($main, $main-background);

    &.FlamingParrot_Blue {
        @import 'variables-blue';
        @include definitions($main, $main-background);
    }

    &.FlamingParrot_Green {
        @import 'variables-green';
        @include definitions($main, $main-background);
    }

    &.FlamingParrot_BlueGrey {
        @import 'variables-bluegrey';
        @include definitions($main, $main-background);
    }

    &.FlamingParrot_Purple {
        @import 'variables-purple';
        @include definitions($main, $main-background);
    }

    &.FlamingParrot_Red {
        @import 'variables-red';
        @include definitions($main, $main-background);
    }

    &.FlamingParrot_DarkOrange {
        @import 'variables-darkorange';
        @include definitions($main, $main-background);
    }

    &.FlamingParrot_DarkBlue {
        @import 'variables-darkblue';
        @include definitions($main, $main-background);
    }

    &.FlamingParrot_DarkGreen {
        @import 'variables-darkgreen';
        @include definitions($main, $main-background);
    }

    &.FlamingParrot_DarkBlueGrey {
        @import 'variables-darkbluegrey';
        @include definitions($main, $main-background);
    }

    &.FlamingParrot_DarkPurple {
        @import 'variables-darkpurple';
        @include definitions($main, $main-background);
    }

    &.FlamingParrot_DarkRed {
        @import 'variables-darkred';
        @include definitions($main, $main-background);
    }
}
